import React, { Component } from 'react';

// children 属性的应用，第三方组件库
class NavBar extends Component {
  render() {
    return (
      <div style={{ display: 'flex', backgroundColor: 'pink' }}>
        <span>&lt;</span>
        <div style={{ flex: 1, textAlign: 'center' }}>
          {this.props.children}
        </div>
      </div>
    );
  }
}
class Hello extends Component {
  render() {
    return (
      <div>
        <h3>Hello 子组件</h3>
        <NavBar>首页</NavBar>
        <br />
        <NavBar>列表</NavBar>
        <br />
        <NavBar>
          <span style={{ color: 'red' }}>信息</span>
        </NavBar>
      </div>
    );
  }
}

// children 属性是一个函数的例子
class App extends Component {
  render() {
    return <Consumer>{(xx) => <h3>{xx}</h3>}</Consumer>;
  }
}

class Consumer extends Component {
  state = {
    value: 'Consumer 内部的属性',
  };

  render() {
    return <>{this.props.children(this.state.value)}</>;
  }
}

export default App;
